<template>
  <div class="index">
    <header>
      <h1>数据可视化-Echarts</h1>
      <div class="showtime">
        <span @click="goMain">当前时间：{{ nowDate }}</span>
      </div>
    </header>
    <!-- 页面主体部分 -->
    <section class="mainbox">
      <div class="column">
        <!-- panel是公共面板的意思 -->
        <div class="panel" bar>
          <h2>柱形图-就业行业</h2>
          <div class="chart"><Bar></Bar></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel" pie>
          <h2>柱形图-就业行业</h2>
          <span @click="twoZero">2020</span>
          <span @click="twoOne">2021</span>
          <div class="chart">
            <LineLeft></LineLeft>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel" ine>
          <h2>柱形图-就业行业</h2>
          <div class="chart">
            <Pie></Pie>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="column2">
        <!-- no -->
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>845</li>
              <li>345</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>前端需求人数</li>
              <li>市场供应人数</li>
            </ul>
          </div>
        </div>
        <!-- map -->
        <div class="map">
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
          <!-- 地图模块 -->
          <div class="map-chart">
            <Map></Map>
          </div>
        </div>
      </div>
      <div class="column3">
        <div class="panel" bar>
          <h2>柱形图-就业行业</h2>
          <div class="chart">
            <BarRight></BarRight>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel" pie>
          <h2>柱形图-就业行业</h2>
          <div class="chart">
                       <LineRight></LineRight>
          </div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel" line>
          <h2>柱形图-就业行业</h2>
          <div class="chart">
            <PieRight></PieRight>
          </div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Bar from "../components/Bar";
import LineLeft from "../components/LineLeft";
import Pie from "../components/Pie";
import PieRight from "../components/PieRight";
import LineRight from "../components/LineRight";
import BarRight from "../components/BarRight";
import Map from "../components/Map"

export default {
  components: {
    Bar,
    LineLeft,
    Pie,
    BarRight,
    PieRight,
    LineRight,
    Map
  },
  data() {
    return {
      nowDate: "",
    };
  },
  mounted() {
    this.currentTime();
  },
  methods: {
    goMain() {
      this.$router.push("./main.vue");
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      if (parseInt(this.isShowDate)) {
        this.nowDate = `${month}/${day}/${year} ${hour}:${minute}:${second}`;
      } else if (!parseInt(this.isShowDate)) {
        this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second}`;
      }
    },
    currentTime() {
      this.formatDate();
      setInterval(this.formatDate, 500);
    },
    twoZero(){

    },
    twoOne(){

    }
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index {
  height: 100vh;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
  background: url("../assets/bg.jpg") no-repeat #000;
  background-size: cover;
}
header {
  height: 7%;
  background: url("../assets/head_bg.png") no-repeat top center;
  /* 垂直水平缩放100% */
  background-size: 100% 100%;
  color: aliceblue;
  text-align: center;
  line-height: 65px;
  position: relative;
}
.showtime {
  position: absolute;
  right: 30px;
  /* top 值 */
  top: 0;
  line-height: 80px;
  color: bisque;
  font-size: 25px;
}
.mainbox {
  display: flex;
  height: 92%;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 10px 10px 0;
}
/* 从123变成了1  2  3 */
/* 以下的就是让section变成3:5:3等分 */
.column {
  flex: 3;
}
.column3 {
  flex: 3;
  margin: 0 10px 15px;
}
.column2 {
  flex: 5;
}

.panel {
  height: 275px;
  background: rgba(255, 255, 255, 0.04) url("../assets/line(1).png");
  border: 1px solid rgba(25, 186, 139, 0.3);
  padding: 0 15px 40px;
  margin-bottom: 15px;
  position: relative;
}
.panel h2 {
  height: 30px;
  color: aliceblue;
  line-height: 25px;
  text-align: center;
  font-size: 25px;
  font-weight: 400;
}
.panel span{
  color: #fff;
  float: left;
  margin-left: 6%;
}
.panel span:after{
  color: red !important;
  background-color: rgba(25, 186, 139, 0.3) !important;
}
.chart {
  height: 270px;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.panel-footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.panel-footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.no {
  background-color: rgba(101, 132, 226, 0.2);
  padding: 20px;
}
.no-hd {
  position: relative;
}
.no-hd ul {
  display: flex;
}
.no-hd ul li {
  color: #ffeb86;
  flex: 1;
  font-size: 60px;
  line-height: 70px;
  font-weight: bold;
  position: relative;
  font-family: "Arial Narrow Bold", sans-serif;
}
.no-hd ul li:first-child::after {
  content: "";
  top: 25%;
  height: 50%;
  width: 1px;
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  right: 0;
}
.no-hd::before {
  position: absolute;
  top: 0;
  left: 0;
  /* 必须有这个 */
  content: "";
  width: 30px;
  height: 15px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.no-hd::after {
  position: absolute;
  bottom: 0;
  right: 0;
  /* 必须有这个 */
  content: "";
  width: 30px;
  height: 15px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.no-bd {
}
.no-bd ul {
  display: flex;
}
.no-bd ul li {
  flex: 1;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 10px;
}
.map {
  height: 800px;
  position: relative;
}
.map1 {
  height: 518px;
  width: 518px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../assets/map.png");
  opacity: 0.3;
  /* 保持缩放的时候能够图片也跟着缩放 */
  background-size: 100% 100%;
}
.map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../assets/lbx.png");
  width: 643px;
  height: 643px;
  animation: rotation 15s linear infinite;
  /* linear 匀速 infinite 无限循环 */
}
.map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../assets/jt.png");
  width: 566px;
  height: 566px;
  animation: rotate2 10s linear infinite;
  /* linear 匀速 infinite 无限循环 */
}
.map-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 800px;
}
@-webkit-keyframes rotation {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
</style>
